<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		创建一个焦点图 假设页面中有很多焦点图(网页中很常见的一种图片轮播，切换效果)，那么我们要实现这些焦点图 最好的方式就是通过创建对象来一一实现，所以我们就需要一个焦点图类
	</body>
	<script>
		//图片轮播类
		var LoopImages = function(imgArr, container) {
			this.imagesArray = imgArr; //轮播图片数组
			this.container = container; //轮播图片容器
		}
		LoopImages.prototype = {
			//创建轮播图片
			createImage: function() {
				console.log('LoopImages createImage function')
			}
		}
		//上下滑动切换类
		var SliderLoopImg = function(imgArr, container) {
			//构造函数继承图片轮播类
			LoopImage.call(this, imgArr, container);
		}
		SliderLoopImg.prototype = new LoopImages();
		//重写继承的切换下一张图片方法
		SliderLoopImg.prototype.changeImage = function() {
			console.log('SlideLoopImg changeImage function');
		}
		//渐隐切换类
		var FadeLoopImg = function(imgArr, container, arrow) {
			LoopImages.call(this, imgArr, container);
			//切换箭头私有变量
			this.arrow = arrow;
		}
		FadeLoopImg.prototype = new LoopImages();
		FadeLoopImg.prototype.changeImage = function() {
			console.log('FadeLoopImg changeImage function');
		}
		//测试用例

		var fadeImg = new FadeLoopImg(['01.jpg'], 'slide', ['left.jpg', 'right.jpg'])
		console.log(fadeImg.imagesArray); //[]"01.jpg"],继承的父类变量
		console.log(fadeImg.container); //slid 继承的父类变量
		console.log(fadeImg.arrow); //['left.jpg', 'right.jpg']，自己的私有变量

		fadeImg.changeImage(); //FadeLoopImg changeImage function
	</script>

</html>